<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="./lib/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <li v-for="item in fruits">{{ item }}</li>
            <li v-bind:key="index" v-for="(item,index) in myFruits">
                {{ item.ename }} --- {{ item.cname }}
            </li>
            <li v-for="(v,k,i) in obj">{{v + '---' + k + '---' + i}}</li>
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    fruits: ['apple', 'orange', 'banana'],
                    myFruits: [
                        {
                            ename: 'apple',
                            cname: '苹果'
                        },
                        {
                            ename: 'orange',
                            cname: '橘子'
                        },
                        {
                            ename: 'banana',
                            cname: '香蕉'
                        }
                    ],
                    obj: {
                        uname: '张三',
                        age: 13,
                        gender: '男'
                    }
                },
                methods: {}
            });
        </script>
    </body>
</html>
